import React from 'react';
import moment from 'moment';
import { Card, Form, Input, Select, DatePicker, Button, Row, Table, Modal, message } from 'antd';
import { connect } from 'dva';

const { RangePicker  } = DatePicker;
const { confirm } = Modal;

class OperationLog extends React.Component{
  constructor(props) {
    super(props);
    this.state = {
      queryData:{
        current:1,
        size:10,
        userName:'',
        operation:-1,
        status:-1,
        beginTime:'',
        endTime:''
      },
      list:[],
      total:0,
      loading:true,
      selectedRowKeys:[],
      selectedRows:[],
      visible:false,
      params:null
    }
  }

  componentWillMount() {
    let { queryData } = this.state;
    queryData.beginTime = moment().subtract(7,'days').format('YYYY-MM-DD');
    queryData.endTime = moment().format('YYYY-MM-DD');
    this.setState({
      queryData
    })
  }

  componentDidMount() {
    this.getList();
  }

  getList = () => {
    const { dispatch } = this.props;
    let { queryData } = this.state;
    this.setState({
      loading:true
    },() => {
      dispatch({
        type: 'operationLog/getLogList',
        payload: queryData,
        callback: res => {
          this.setState({
            list:res.records,
            total:res.total,
            loading:false,
            selectedRowKeys:[]
          })
        },
      });
    })
  }

  queryBycondition = () => {
    let queryData = this.props.form.getFieldsValue();
    let beginTime = moment().subtract(7,'days').format('YYYY-MM-DD');
    let endTime = moment().format('YYYY-MM-DD');
    queryData.beginTime = queryData.operationTime ? queryData.operationTime[0].format('YYYY-MM-DD') : beginTime;
    queryData.endTime = queryData.operationTime ? queryData.operationTime[1].format('YYYY-MM-DD') : endTime;
    delete queryData.operationTime;
    queryData.current = 1;
    queryData.size = 10;
    this.setState({
      queryData
    },() => {
      this.getList();
    })
  }

  queryByPage = (page,pageSize) => {
    let { queryData } = this.state;
    queryData.current = page;
    queryData.size = pageSize;
    this.setState({
      queryData
    },() => {
      this.getList();
    })
  }

  resetQueryData = () => {
    this.props.form.resetFields();
    this.queryBycondition();
  }

  clearByDate = () => {
    let { queryData } = this.state;
    const { dispatch } = this.props;
    const that = this;
    confirm({
      title: '确定要清空【'+queryData.beginTime+'~'+queryData.endTime+'】时间段内的操作日志吗？',
      okText: '确定',
      okType: 'danger',
      cancelText: '取消',
      onOk() {
        dispatch({
          type: 'operationLog/emptyLog',
          payload: { beginTime:queryData.beginTime,endTime:queryData.endTime },
          callback: res => {
            message.info(res.message);
            queryData.current = 1;
            that.setState({
              queryData
            },() => {
              that.getList();
            })
          },
        });
      },
      onCancel() {},
    });

  }

  showDetail = params => {
    this.setState({
      visible:true,
      params
    })
  }

  colseDetail = () => {
    this.setState({
      visible:false,
      params:null
    })
  }

  render() {
    const { getFieldDecorator } = this.props.form;
    const { list,total,queryData,selectedRowKeys,visible,params } = this.state;
    const rowSelection = {
      onChange: (selectedRowKeys, selectedRows) => {
        this.setState({
          selectedRowKeys,
          selectedRows
        })
      },
      selectedRowKeys
    };
    const columns = [
      {
        title: '日志编号',
        dataIndex: 'id',
        key: 'id',
        width:'10%'
      },
      {
        title: '操作内容',
        dataIndex: 'description',
        key: 'description',
        width:'15%'
      },
      {
        title: '操作类型',
        dataIndex: 'actionMethod',
        key: 'actionMethod',
        width:'10%'
      },
      {
        title: '请求方式',
        dataIndex: 'requestMethod',
        key: 'requestMethod',
        width:'10%'
      },
      {
        title: '操作人员',
        dataIndex: 'userName',
        key: 'userName',
        width:'10%'
      },
      {
        title: '主机',
        dataIndex: 'ip',
        key: 'ip',
        width:'10%'
      },
      {
        title: '操作状态',
        dataIndex: 'type',
        key: 'type',
        width:'10%',
        render:text => {
          switch (text) {
            case 1: return '成功';break;
            case 2: return '失败';break;
          }
        }
      },
      {
        title: '操作日期',
        dataIndex: 'startTime',
        key: 'startTime',
        width:'10%',
        render:text => {
          return moment(text).format('YYYY-MM-DD HH:mm:ss')
        }
      },
      {
        title: '操作',
        width:'10%',
        render:(text,row) => {
          return <Button type={'link'} icon={'eye'} onClick={() => this.showDetail(row.params)}>详细</Button>
        }
      },
    ]
    return (
      <div>
        <Card>
          <div>
            <Form layout={'inline'}>
              <Form.Item label={'操作人员'}>
                {
                  getFieldDecorator('userName')(
                    <Input />
                  )
                }
              </Form.Item>
              <Form.Item label={'类型'}>
                {
                  getFieldDecorator('operation')(
                    <Select placeholder={'操作类型'} style={{width:150}}>
                      <Select.Option value={-1}>全部类型</Select.Option>
                      <Select.Option value={1}>新增</Select.Option>
                      <Select.Option value={2}>修改</Select.Option>
                      <Select.Option value={3}>删除</Select.Option>
                    </Select>
                  )
                }
              </Form.Item>
              <Form.Item label={'状态'}>
                {
                  getFieldDecorator('status')(
                    <Select placeholder={'操作状态'} style={{width:150}}>
                      <Select.Option value={-1}>全部状态</Select.Option>
                      <Select.Option value={1}>成功</Select.Option>
                      <Select.Option value={2}>失败</Select.Option>
                    </Select>
                  )
                }
              </Form.Item>
              <Form.Item label={'操作时间'}>
                {
                  getFieldDecorator('operationTime',{
                    initialValue:[moment().subtract(7,'days'),moment()]
                  })(
                    <RangePicker allowClear={false} />
                  )
                }
              </Form.Item>
              <Form.Item>
                <Button type={'primary'} icon={'search'} onClick={this.queryBycondition}>搜索</Button>
              </Form.Item>
              <Form.Item>
                <Button icon={'sync'} onClick={this.resetQueryData}>重置</Button>
              </Form.Item>
              <Form.Item>
                <Button type={'danger'} icon={'delete'} onClick={this.clearByDate}>清空</Button>
              </Form.Item>
            </Form>
          </div>
          <div style={{marginTop:15}}>
            <Table
              rowSelection={rowSelection}
              rowKey={'id'}
              columns={columns}
              dataSource={list}
              pagination={{
                total,
                current:queryData.current,
                onChange:this.queryByPage,
                showSizeChanger:true,
                onShowSizeChange:this.queryByPage,
                showQuickJumper:true
              }}
            />
          </div>
        </Card>
        <Modal
          visible={visible}
          title={'详情'}
          footer={null}
          onCancel={this.colseDetail}
        >
          <div>
            {params}
          </div>
        </Modal>
      </div>
    );
  }
}

export default connect(({ user }) => ({
  currentUser: user.currentUser,
}))(Form.create()(OperationLog));
